.timer {
	padding: 10px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	background: -webkit-linear-gradient(top, #222, #444);
}

.timer .cell {
	/*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/
	width: 0.60em;
	height: 40px;
	font-size: 50px;
	overflow: hidden;
	position: relative;
	float: left;
}

.timer .numbers {
	width: 0.6em;
	line-height: 40px;
	font-family: digital, arial, verdana;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	color: #02F5B6;
	/* text-shadow: 0 0 5px rgba(255, 255, 255, 1); */
}

input[name="controls"] {display: none;}

/*秒表控制器样式*/
.timer_controls {
 margin-top: -5px;
}
.timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}

/*Control code*/
/*秒表暂停运转*/
#stop:checked~.timer .numbers {
	animation-play-state: paused;
}

/*秒表开始运转*/
#start:checked~.timer .numbers {
	animation-play-state: running;
}

/*重置秒表*/
#reset:checked~.timer .numbers {
	animation: none;
}

.moveten {
	/*使用分步骤来移动数字，10个数字等于10步*/
	animation: moveten 1s steps(10, end) infinite;
	/*默认情况下动画是停止不动的*/
	animation-play-state: paused;
}

.movesix {
	animation: movesix 1s steps(6, end) infinite;
}

/*同步时间的速率*/
/*每秒十个数字，因此也需要十步*/
.second {
	animation-duration: 10s;
}

.tensecond {
	/*60 times .second*/
	animation-duration: 60s;
}

.milisecond {
	/*1/10th of .second*/
	animation-duration: 1s;
}

.tenmilisecond {
	animation-duration: 0.1s;
}

.hundredmilisecond {
	animation-duration: 0.01s;
}

.minute {
	/*60 times .second*/
	animation-duration: 600s;
}

.tenminute {
	/*60 times .minute*/
	animation-duration: 3600s;
}

.hour {
	/*60 times .minute*/
	animation-duration: 36000s;
}

.tenhour {
	/*10 times .hour*/
	animation-duration: 360000s;
}

/*------------------------------------------------------------*\
1、动画的逻辑就是给数字使用了绝对定位，改变“top”的属性值；
2、分 和 秒 应该是 '60' 而不是 '100'，因此需要创建两个动画；
3、十步十个数字
4、六步六个数字
\*-------------------------------------------------------------*/
@-webkit-keyframes moveten {
	0% {
		top: 0;
	}

	100% {
		top: -400px;
	}
}

@-webkit-keyframes movesix {
	0% {
		top: 0;
	}

	100% {
		top: -240px;
	}
}

/*Lets use a better font for the numbers*/
@font-face {
	font-family: 'digital';
	src: url('./timer.TTF');
}
